<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MVVM模型</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!--
    MVVM 的理解：
        1. M 模型：对应 data 中的数据（类似于状态）
        2. V 视图：模板代码
        3. VM 视图模型：Vue 实例对象
-->
<!-- V View -->
<div id="root">
    <h2>hello, {{msg}}</h2>
    <h2>地址是：{{address}}</h2>
</div>
<script>
    // VM view model
    const vm = new Vue({
        el: "#root",    // 不用实例化 Vue 对象，因为 el 指定了该对象为哪个容器服务
        // M model
        data: {
            msg: '波波米可',
            address: '宏福科技园综合楼'
        }
    });

    // 观察发现: 通过 vm 能看到 data 中的属性(data 被解析并挂载到了 vm 对象上，看到的并不是原生的 data)
    setTimeout(()=>{
        console.log(vm.msg);  // 通过 vm 可以读取到 data 中的属性
        vm.msg = 'atguigu'  // 通过 vm 可以修改 data 中的属性，且修改后页面会自动更新
    }, 1000);
</script>
</body>
</html>
